<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DBView</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/static/css/icon.css">
    <script type="text/javascript" src="/static/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui/jquery.easyui.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/codemirror.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/addon/hint/show-hint.min.css" rel="stylesheet">
    <style>
        .CodeMirror{height: 98%;}
    </style>
</head>
<body class="easyui-layout">
    <div data-options="region:'west',title:'数据库选择',split:true" style="width:200px;">
        <select id="dbConfigs" class="easyui-combobox" style="width: 100%;"></select>
        <div id="p" class="easyui-panel" title="数据库" data-options="fit:true">
            <ui id="treeSchemas" class="easyui-tree"></ui>
        </div>
    </div>
    <div  data-options="region:'center',title:'MySQL Web GUI'" style="padding:5px;background:#eee;">
        <div id="tt" class="easyui-tabs" data-options="fit:true">
            <div title="对象" style="display:none;">
                <table class="easyui-datagrid" style="height: 99%;" id="objectGrid"
                       data-options="">
                    <thead>
                    <tr>
                        <th data-options="field:'name'" style="width: 20%;">名</th>
                        <th data-options="field:'rows'" style="width: 10%;">行</th>
                        <th data-options="field:'dataLength',formatter:renderSize", style="width: 10%;">数据长度</th>
                        <th data-options="field:'engine'" style="width: 10%">引擎</th>
                        <th data-options="field:'createTime'" style="width: 10%;">创建日期</th>
                        <th data-options="field:'tableCollation'" style="width: 15%">排序规则</th>
                        <th data-options="field:'comment'" style="width: 20%;">注释</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div title="查询" style="display:none;">
                <div class="easyui-layout" data-options="fit:true">
                    <div data-options="region:'north',split:true">
                        <a id="executeSQL" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">执行</a>
                        <a id="saveSQL" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
                    </div>
                    <div data-options="region:'center',border:false" style="height: 50%;">
                        <textarea id="sqlTextArea"></textarea>
                    </div>
                    <div data-options="region:'south',split:true, footer:'#result-set-foot'" style="height:50%;padding: 5px;">
                        <div id="result-tab" class="easyui-tabs" data-options="fit:true">
                            <div title="消息" style="display: none;">
                                <textarea id="messageTextarea" readonly></textarea>
                            </div>
                            <div title="结果集" style="display: none;">
                                <table class="easyui-datagrid" id="execute-result-set">
                                </table>
                            </div>
                        </div>

                    </div>
                    <div id="result-set-foot" style="padding:5px;">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/codemirror.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/addon/hint/show-hint.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/mode/sql/sql.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/addon/hint/sql-hint.min.js"></script>
    <script src="/static/js/index.js"></script>
<script>
    function renderSize(value){
        if(null==value || value===''){
            return "0 Bytes";
        }
        var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
        var index=0;
        var srcsize = parseFloat(value);
        index=Math.floor(Math.log(srcsize)/Math.log(1024));
        var size =srcsize/Math.pow(1024,index);
        size=size.toFixed(2);//保留的小数位数
        return size+unitArr[index];
    }
</script>
</body>
</html>